import React from 'react'
import './manage_home.css'
import Header from '@common/header'
import { Table, Pagination, Button, Input, Tabs, Tag } from 'antd'
import { PlusOutlined, DownloadOutlined, CheckCircleFilled } from '@ant-design/icons'

const columns = [
  {
    title: '序号',
    width: 60,
    dataIndex: 'column0',
    key: 'column0',
    align: 'center',
    fixed: 'left',
  },
  {
    title: '分类',
    width: 140,
    dataIndex: 'column1',
    key: 'column1',
    align: 'left',
    fixed: 'left',
  },
  {
    title: '项目名称',
    dataIndex: 'column2',
    key: 'column2',
    align: 'left',
    width: 300,
  },
  {
    title: '类别',
    dataIndex: 'column9',
    key: 'column9',
    align: 'left',
    width: 100,
  },
  {
    title: '拟下达2021年金额（元）',
    dataIndex: 'column3',
    key: 'column3',
    width: 200,
    align: 'right'
  },
  {
    title: '项目信息',
    dataIndex: 'column4',
    key: 'column4',
    width: 100,
    align: 'center',
  },
  {
    title: '资金情况',
    dataIndex: 'column5',
    key: 'column5',
    width: 100,
    align: 'center',
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 156,
    align: 'right',  
    render: () => (
      <div className="buttons">
        <Button className="buttons-item" type="link">编辑</Button>
        <Button className="buttons-item" type="link">删除</Button>
        <Button className="buttons-item" type="link">下载</Button>
      </div>
    ),
  },
];

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: 'column' + i,
    column0: i + 1,
    column1: '经常性项目',
    column2: '关于XXXXXX建设项目（信息化建设）',
    column3: '500,000,000.00',
    column4: '已填',
    column5: '未填',
    column6: '已填',
    column7: '已填',
    column8: '已填',
    column9: '系统运维',
  })
}

class ManageHome extends React.Component {

  state = {
    headerTitle: '项目列表',
    headerOptions: [
      { name: '首页', path: '/home' },
      { name: '项目库' },
      { name: '项目管理' },
    ],
    total: 50, // 总数据条数
    totalMoney: 1200, // 总金额
  }

  callback = (key) => {
    console.log(key)
  }

  onSearch = (e) => {
    console.log(e)
  }
  
  render() {
    let { headerTitle, headerOptions, totalMoney, total } = this.state
    return (
      <>
        <div className="_manage_home">
          {/* 引导弹窗 */}
          {/* <div className="guide_modal"></div> */}
          <Header title={ headerTitle } options={ headerOptions }></Header>
          <Tabs defaultActiveKey="1" onChange={ this.callback }>
            <Tabs.TabPane tab="经常性项目 (0)" key="1"></Tabs.TabPane>
            <Tabs.TabPane tab="新增项目 (0)" key="2"></Tabs.TabPane>
            <Tabs.TabPane tab="往年度本年待支付项目 (0)" key="3"></Tabs.TabPane>
          </Tabs>
          <div className="manage_home-container">
            <div className="manage_home-box">
              <div className="control_bar">
                <div className="control_bar-left">
                  <div className="control_bar-button">
                    <Button type="primary" icon={ <PlusOutlined /> }>创建项目</Button>
                  </div>
                  <div className="control_bar-button">
                    <Button type="primary" icon={ <DownloadOutlined /> }>导出</Button>
                  </div>
                  <div className="control_bar-button">
                    {/* <Button>点击确认该类别项目已申报完成</Button> */}
                    <Tag
                      icon={ <CheckCircleFilled /> }
                      color="success"
                      style={{
                        width: 194,
                        height: 32,
                        fontSize: 14,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                      }}
                    >
                    该类别项目已申报完成
                    </Tag>
                  </div>
                </div>
                <div className="control_bar-right">
                  <Input.Search
                    placeholder="请输入筛选内容"
                    enterButton="筛选"
                    style={{ width: 352 }}
                    onSearch={ this.onSearch }
                  />
                </div>
              </div>
              <div className="manage_home-main">
                <div className="table">
                  <Table columns={ columns } dataSource={ data } scroll={{ x: 1000 }} pagination={ false } loading={ false }/>
                </div>
                <div className="pagination">
                  <div className="pagination-toast">当前页面金额总计： <span className="pagination-toast-number">{ totalMoney }</span> 元 / 总共 { total } 条</div>
                  <Pagination showSizeChanger total={ total }></Pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }

}

export default ManageHome